<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="60%" @open="open">
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="auto"
    >
      <el-form-item label="资源名称" prop="sourceName">
        <el-input
          v-model="queryParams.sourceName"
          placeholder="请输入资源名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="资源编号" prop="sourceCode">
        <el-input
          v-model="queryParams.sourceCode"
          placeholder="请输入资源编号"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="资源类型" prop="sourceType">
        <el-select
          v-model="queryParams.sourceType"
          placeholder="请选择资源类型"
          clearable
          class="!w-240px"
        >
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.SOURCE_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="资源来源" prop="sourceFrom">
        <!-- <el-select
          v-model="queryParams.sourceFrom"
          placeholder="请选择资源来源"
          clearable
          class="!w-240px"
        >
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.SOURCE_FROM)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select> -->
        <el-input
          v-model="queryParams.sourceFrom"
          placeholder="请输入资源来源"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="状态" prop="sourceStatus">
        <el-select
          v-model="queryParams.sourceStatus"
          placeholder="请选择状态"
          clearable
          class="!w-240px"
        >
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.SOURCE_STATUS)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left"/>
    <div class="clearfix">
      <el-table
        v-loading="loading"
        ref="sourceTableRef"
        :data="list"
        row-key="id"
        :stripe="true"
        :show-overflow-tooltip="true"
        @selection-change="handleSelectionChange">
        <!-- <el-table-column label="主键" align="center" prop="id" /> -->
        <el-table-column label="#" align="center" type="selection" width="55" reserve-selection fixed="left" />
        <el-table-column label="封面" align="center" prop="mainImage">
          <template #default="scope">
            <el-image
              style="width: 44px; height: 44px;"
              :src="scope.row.mainImage"
              :preview-src-list="[scope.row.mainImage]"
              fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column label="资源名称" align="center" prop="sourceName" />
        <el-table-column label="资源编号" align="center" prop="sourceCode" />
        <el-table-column label="资源类型" align="center" prop="sourceType">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.SOURCE_TYPE" :value="scope.row.sourceType" />
          </template>
        </el-table-column>
        <el-table-column label="来源信息" align="center" prop="sourceDesc">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.SOURCE_DESC" :value="scope.row.sourceDesc" />
          </template>
        </el-table-column>
        <el-table-column label="资源来源" align="center" prop="sourceFrom">
          <template #default="scope">
            <!-- <dict-tag :type="DICT_TYPE.SOURCE_FROM" :value="scope.row.sourceFrom" /> -->
            {{ scope.row.sourceFrom }}
          </template>
        </el-table-column>
        <el-table-column label="文件类型" align="center" prop="fileType"/>
        <el-table-column label="主题分类" align="center" prop="sourceTopicType"/>
        <el-table-column label="资源标签" align="center" prop="sourceTag"/>
        <el-table-column label="存放位置" align="center" prop="position"/>
        <el-table-column label="资源描述" align="center" prop="sourceDesc"/>
        <el-table-column
          label="入库时间"
          align="center"
          prop="enterTime"
          :formatter="dateFormatter"
          width="180px"
        />
        <el-table-column
          label="更新时间"
          align="center"
          prop="updateTime"
          :formatter="dateFormatter"
          width="180px"
        />
        <el-table-column label="操作" align="center" min-width="60px" fixed="right">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="openDetail(scope.row)"
              v-hasPermi="['dr:source:query']"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
    </template>

     
  </Dialog>
  <!-- 资源详情 -->
  <SourceDetail v-model:visible="detailVisible" :data="currentRow" />
</template>

<script setup lang="ts">
import type { TableInstance } from 'element-plus'
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import { propTypes } from '@/utils/propTypes'
import { SourceApi, SourceVO } from '@/api/dr/source'

defineOptions({ name: 'SourceSelectDialog' })
const emit = defineEmits(['update:visible', 'update:modelValue', 'submit'])
const props = defineProps({
  visible: propTypes.bool.def(false),
  modelValue: propTypes.array.def([]),
  type: propTypes.string.def(''),
})
// 弹窗的是否展示
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => {
    emit('update:visible', val)
  },
})
// 弹窗的标题
const dialogTitle = ref('数字资源')
const formLoading = ref(false)
const detailVisible = ref<boolean>(false)
const currentRow = ref<SourceVO>()

const sourceTableRef = ref<TableInstance>()
const multipleSelection = ref<SourceVO[]>([])

const loading = ref(true) // 列表的加载中
const list = ref<SourceVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  sourceName: undefined,
  sourceCode: undefined,
  sourceType: undefined,
  sourceDesc: undefined,
  fileType: undefined,
  fileSize: undefined,
  file: undefined,
  sourceFrom: undefined,
  sourceStatus: undefined,
  createTime: undefined,
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const fn = props.type === 'apply'
      ? SourceApi.getSourcePageSelectApply : SourceApi.getSourcePageSelect
    const data = await fn(queryParams)
    list.value = data.list
    total.value = data.total
    await nextTick()
    // 选中数据的回显
    if(props.modelValue && props.modelValue.length > 0) {
      list.value.forEach((item: SourceVO) => {
        if(props.modelValue.some((row: SourceVO) => row.id === item.id)) {
          sourceTableRef.value?.toggleRowSelection(item,true)
        } else {
          sourceTableRef.value?.toggleRowSelection(item,false)
        }
      })
    } else {
      sourceTableRef.value?.clearSelection()
    }
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

const handleSelectionChange = (val: SourceVO[]) => {
  multipleSelection.value = val
}
//  提交
const submitForm = () => {
  dialogVisible.value = false
  emit('update:modelValue', multipleSelection.value)
  emit('submit', multipleSelection.value)
}

// 详情弹窗
const openDetail = (row: any) => {
  currentRow.value = { ...row }
  detailVisible.value = true
}
const open = () => {
  getList()
}
</script>

<style lang="scss" scoped>
</style>
